<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  react核心库  -->
    <script src="lib/react.development.js"></script>
    <!--  reactdom:操作DOM  -->
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<!--指定挂载的位置-->
<div id="root"></div>
</body>
<script type="text/babel">
    // 创建一个React容器
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 类组件
        // 1- 类组件是通过class定义的
        // 2- 类组件建议要有返回值
        // 3- 如果返回的是JSX有且只能是一个根元素
        // 4- 类的名字即是组件的名字
        // 5- 使用组件时，只需要将组件名字通过<>进行包裹并要求闭合
        // 6- 必须要设置render方法
        // 7- 组件可以使用多次

    }
    {
        const {Component} = React;
        const Next = class extends Component {
            render(){
                return (
                    <div>
                        <h3>next</h3>
                        <Hello/>
                    </div>
                )
            }
        }
        const Child = class extends Component{
            render(){
                return (
                    <div>
                        <h3>hello</h3>
                    </div>
                )
            }
        }
        root.render((
            <>
                <Next/>
                <Hello/>
            </>
        ))

    }
</script>
</html>